import React, { Component } from 'react';
import axios from 'axios';
import { NavLink } from 'react-router-dom';
import $ from  'jquery'
import './Player.scss';
class Com extends Component {
  constructor (props) {
    super(props)
    this.state = {
      song : '',
      songer : '',
      songUrl : '',
      songLrc : ``,
      songTime : '',
      songImg : ''
    }
  }

  // //全选商品
	// function checkBoxAllChange(btn){
	// 	if (btn.checked==true) {
	// 		$(btn).css({'background':'url(img/registerAuto.jpg)','border':'2px solid #1428a0'})
	// 		$('.affirmShopping ul input').click()
	// 	}else if (btn.checked!=true) {
	// 		$(btn).css({'background':'#fff'})
	// 		$('.affirmShopping ul input').click()
	// 	}
	// }
	
	
	// //单选商品
	// function checkBoxChange(btn){
	// 	if (btn.checked==true) {
	// 		$(btn).css({'background':'url(img/registerAuto.jpg)','border':'2px solid #1428a0'})
	// 		var aaa = $(btn).siblings().eq(-1).html()
	// 		var bbb = parseInt(aaa.slice(1,10))
	// 		console.log(bbb)
	// 		var ccc = $('.total-num-top').children().eq(0).children()[0].innerHTML
	// 		$('.total-num-top').children().eq(0).children()[0].innerHTML=parseInt(ccc)+bbb;
	// 		$('.total-num-bottom').children().eq(0)[0].innerHTML=parseInt(ccc)+bbb;
	// 	}else if (btn.checked!=true) {
	// 		$(btn).css({'background':'#fff','border':'2px solid #bdc3c9'})
	// 		var aaa = $(btn).siblings().eq(-1).html()
	// 		var bbb = parseInt(aaa.slice(1,10))
	// 		console.log(bbb)
	// 		var ccc = $('.total-num-top').children().eq(0).children()[0].innerHTML
	// 		$('.total-num-top').children().eq(0).children()[0].innerHTML=parseInt(ccc)-bbb;
	// 		$('.total-num-bottom').children().eq(0)[0].innerHTML=parseInt(ccc)-bbb;
	// 	}
  // }

  // load()：加载音频、视频软件，通常不必调用，除非是动态生成的元素，用来在播放前预加载
  // play()：加载并播放音频、视频文件，除非文件已经暂停在其他位置，否则默认重头开始播放
  // pause()：暂停处于播放状态的音频、视频文件
  // src：音频文件路径。 
  // autoplay：设置音频是否自动播放 （默认有此属性为自动播放已经加载的的媒体文件），或查询是否已设置为autoplay 
  // autobuffer：设置是否在页面加载时自动缓冲音频，如果设置了autoplay，则忽略此特性 
  // loop：设置音频是否要循环播放。，或查询是否已设置为loop 
  // currentTime：以s为单位返回从开始播放到目前所花的时间，也可设置currentTime的值来跳转到特定位置 
  // controls： 显示或者隐藏用户控制界面（属性供添加播放、暂停和音量控件。 ） 
  // volume：在0.0到1.0间设置音量值，或查询当前音量值 
  // muted：设置是否静音

  
  checkBoxAllChange = (e) => {
    if (e.target.checked === true) {
      console.log(1);
      $(e.target).css({'background':'rgba(255,255,255,0.7)','border':'1px solid rgba(255,255,255,0.8)'})
    } else {
      $(e.target).css({'background':0,'border':'1px solid rgba(255,255,255,0.3)'})
    }
  }

  checkBoxChange = (e) => {
    if (e.target.checked === true) {
      console.log(1);
      $(e.target).css({'background':'rgba(255,255,255,0.7)','border':'1px solid rgba(255,255,255,0.8)'})
    } else {
      $(e.target).css({'background':0,'border':'1px solid rgba(255,255,255,0.3)'})
    }
  }

  componentDidMount () {
    console.log(this.props.match.params.id)
    axios.get('https://api.bzqll.com/music/netease/song?key=579621905&id='+this.props.match.params.id)
    .then(data => {
      console.log(data)
      $('.player-shadow').css({
        'background':`url(${data.data.data.pic})`,
        'background-size': 'cover'
      })
      axios.get(data.data.data.lrc)
      .then(data => {
        console.log(data)
        $('.con-v-right p').prepend(data.data)
        this.setState({
          songLrc : data.data
        })
      })
      var second = Number;
      if (data.data.data.time%60 < 10) {
        second = '0'+data.data.data.time%60
      } else {
        second = data.data.data.time%60
      }
      var Time = parseInt(data.data.data.time/60)+':'+second
      
      this.setState({
        song : data.data.data.name,
        songer : data.data.data.singer,
        songUrl : data.data.data.url,
        songTime : Time,
        songImg : data.data.data.pic
      })
    })
  }

  render () {
    return (
      <div className="player">
        <div className="player-content">
          <NavLink to="/musichall/index" className="logo">余 音</NavLink>
          <div className="con-vessel">
            <div className="con-v-left">
              <ul className="left-operate">
                <li className="iconfont icon-like"> 收藏</li>
                <li className="iconfont icon-roundadd"> 添加到</li>
                <li className="iconfont icon-down_light"> 下载</li>
                <li className="iconfont icon-delete_light"> 删除</li>
                <li className="iconfont icon-edit"> 清空列表</li>
              </ul>
              <h2>
                <input type="checkbox" onClick={(e)=>{this.checkBoxAllChange(e)}} />
                <p>歌曲</p>
                <span>歌手</span>
                <b>时长</b>
              </h2>
              <ul className="left-songList">
                <li>
                  <input type="checkbox" onClick={(e)=>{this.checkBoxChange(e)}} />
                  <p>1 { this.state.song }</p>
                  <span>{ this.state.songer }</span>
                  <b>{ this.state.songTime }</b>
                </li>
              </ul>
            </div>
            <div className="con-v-right">
              <img src={ this.state.songImg } alt=""/>
              <p>
                {/* { this.state.songLrc } */}
                {/* [00:00.00] 作曲 : 艾福杰尼<br/>
                [00:01.00] 作词 : 艾福杰尼<br/>
                [00:13.81]编曲：顺德<br/>
                [00:14.39]<br/>
                [00:15.48]曾经骗你说要爱你爱够100年<br/>
                [00:19.61]假装相信冲我点头冲我露笑脸<br/>
                [00:23.36]没有关系你说爱就不在乎终点<br/>
                [00:27.42]最重要是开心没人会想那么远<br/>
                [00:31.49]如果没有你在我要怎么过圣诞<br/>
                [00:35.39]忽然想起你说一个人也要勇敢<br/>
                [00:39.37]我本可以忍受之前一切的黑暗<br/>
                [00:43.32]你却像太阳般照进我心早让我习惯<br/>
                [00:47.43]<br/>
                [00:47.97]Ti Amo Ti Amo Ti Amo davvero<br/>
                [00:53.26]<br/>
                [00:55.82]Ti Amo Ti Amo Ti Amo davvero<br/>
                [01:02.20]<br/>
                [01:03.76]Ti Amo Ti Amo Ti Amo davvero<br/>
                [01:10.95]<br/>
                [01:11.72]Ti Amo Ti Amo Ti Amo davvero<br/>
                [01:17.05]<br/>
                [01:19.88]如果爱本身会痛我选择止痛片<br/>
                [01:23.33]哪怕副作用分开后多抽几包烟<br/>
                [01:27.47]我也不愿意不甘心再留下遗憾<br/>
                [01:31.30]请给我点时间昨天才学会浪漫<br/>
                [01:35.56]情不自禁默默让你把我心偷走<br/>
                [01:39.30]请别叫醒我当你在选择离开后<br/>
                [01:43.29]也许受够了一个人独自的守候<br/>
                [01:47.27]想要你的温度在身边永远停留<br/>
                [01:51.11]<br/>
                [01:52.10]<br/>
                [01:52.51]Ti Amo Ti Amo Ti Amo davvero<br/>
                [01:56.41]<br/>
                [01:56.66]（期待上帝给我更多的考验）<br/>
                [01:59.26]<br/>
                [02:00.05]Ti Amo Ti Amo Ti Amo davvero<br/>
                [02:04.87]<br/>
                [02:05.02]（不会放过任何机会Hold u hand）<br/>
                [02:07.92]<br/>
                [02:08.14]Ti Amo Ti Amo Ti Amo davvero<br/>
                [02:12.47]<br/>
                [02:12.85](不去在乎别人爱的多敷衍)<br/>
                [02:15.49]<br/>
                [02:15.95]Ti Amo Ti Amo Ti Amo davvero<br/>
                [02:20.90]<br/>
                [02:21.07](这是我最后一次Lose my mind)<br/>
                [02:23.70]<br/>
                [02:24.15]想要送你礼物怎么办<br/>
                [02:25.70]想要你在我的身边怎么办<br/>
                [02:27.64]想在每个角落每个假日一起浪漫每个时间段<br/>
                [02:31.66]大胆的爱你我不再委婉 回忆甜真的太美满<br/>
                [02:35.62]感谢你陪伴不想失忆为爱疯狂的像个醉汉<br/>
                [02:39.39]想把最好的全都给你 100年还剩90几<br/>
                [02:43.53]有什么关系过了这个世纪<br/>
                [02:45.62]就算我的肉体变成机器<br/>
                [02:47.46]有人说这是个陷阱<br/>
                [02:49.59]掉下去证明我还年轻<br/>
                [02:51.48]可以骂我笨的可以<br/>
                [02:53.46]字典里早就查了这叫痴情<br/>
                [02:56.09]<br/>
                [03:04.13]Ti Amo davvero<br/>
                [03:07.75]Ti Amo davvero<br/>
                [03:12.02]Journey gonna makes u cry baby<br/>
                [03:16.95]My lover<br/>
                [03:18.92]My hater<br/>
                [03:21.16]<br/>
                [03:23.40]混音：顺德<br/>
                [03:24.18]母带：顺德<br/>
                [03:25.46]<br/> */}
              </p>
            </div>
            <div className="con-v-bottom">
              <audio src={ this.state.songUrl } controls autoPlay>
                您的浏览器不支持 audio 标签。
              </audio>
            </div>
          </div>
        </div>
        <div className="player-shadow"></div>
      </div>
    )
  }
}

export default Com;
